<template>
    <div>
        <div class="head">
            <el-form inline :model="selectdata"
                     label-width="150px"
                     size="small"
            >

                <el-form-item>
                    <el-input v-model="selectdata.name" @keyup.enter.native="search"
                              placeholder="请输入用户名称">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-input v-model="selectdata.remark" @keyup.enter.native="search"
                              placeholder="请输入用户备注">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
                    <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>

            <div>
                <!-- 新增 -->
                <el-button size="small" plain type="primary" icon="el-icon-plus" @click="open_dialog">新增<i
                        class="el-icon--right"></i>
                </el-button>
            </div>


        </div>


        <div>
            <!-- 表 -->
            <el-table :data="tableData" border v-loading="loading">
                <el-table-column label="用户ID" align="center">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>


                <el-table-column label="名称" align="center">
                    <template slot-scope="scope">{{ scope.row.name }}</template>
                </el-table-column>


                <el-table-column label="性别" align="center">
                    <template slot-scope="scope">{{ scope.row.gender }}</template>
                </el-table-column>


                <el-table-column label="手机号" align="center">
                    <template slot-scope="scope">{{ scope.row.mobile }}</template>
                </el-table-column>

                <el-table-column label="备注" align="center">
                    <template slot-scope="scope">{{ scope.row.remark }}</template>
                </el-table-column>


                <el-table-column label="创建时间" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.createTime | filterCtime}}</template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">

                        <el-button plain size="mini" type="success"
                                   @click="handleCommand('edit',scope.row)">编辑
                        </el-button>
                        <el-button plain size="mini"
                                   type="danger" @click="handleCommand('del', scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>


            </el-table>
            <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        </div>


        <el-dialog
                title="添加通讯录"
                :visible.sync="addDialogVisible"
                width="30%"
                center>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="form.remark"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-input v-model="form.gender"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="add">立即创建</el-button>
                    <el-button @click="addDialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


        <el-dialog
                title="编辑通讯录"
                :visible.sync="updateDialogVisible"
                width="30%"
                center>
            <el-form ref="form" :model="updateForm" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="updateForm.name"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                    <el-input v-model="updateForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="updateForm.remark"></el-input>
                </el-form-item>

                <el-form-item label="性别">
                    <el-input v-model="updateForm.gender"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="updateAddressBook">确定</el-button>
                    <el-button @click="updateDialogVisible=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import moment from 'moment'
    import {
        address_book_list,
        address_book_add,
        address_book_delete,
        address_book_detail,
        address_book_update
    } from "../../api/address_book";

    export default {
        name: "address_book",
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: false,
                tableData: [],
                addDialogVisible: false,
                updateDialogVisible: false,
                updateForm: {},
                dateRange: [],
                formInline: {},
                form: {},
                selectdata: {
                    remark: "",
                    name: "",

                }
            };
        },
        created() {
            this.getData();
        },
        methods: {
            /**
             * 重置搜索
             */
            clearForm() {
                this.selectdata = {};
                this.getData();
            },

            /**
             * 搜索
             */
            search() {
                this.currentPage = 1;
                this.getData()
            },

            updateAddressBook() {
                address_book_update(this.updateForm).then(res => {
                    if (res.status === 200) {
                        this.$message.success("更新成功");
                        this.updateDialogVisible = false;
                        this.getData();
                    }
                })
            },

            handleCommand(cmd, data) {
                if (cmd === 'edit') {
                    this.update_dialog(data.id)
                }
                if (cmd === 'del') {

                    this.delete_address_book(data.id)
                }
            },

            update_dialog(id) {
                this.updateDialogVisible = true;
                let params = {};
                params.id = id;
                address_book_detail(params).then(res => {
                    if (res.status === 200) {
                        this.updateForm = res.data;
                    }
                })
            },

            add() {
                address_book_add(this.form).then(res => {
                    if (res.status === 200) {
                        this.$message.success("添加成功");
                        this.addDialogVisible = false;
                        this.getData();
                        this.form = {};
                    }
                })
            },

            open_dialog() {
                this.addDialogVisible = true;
            },
            delete_address_book(id) {

                this.$confirm("是否删除该数据?", "操作提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    let params = {};
                    params.id = id;
                    address_book_delete(params).then(res => {
                        if (res.status === 200) {
                            this.$message.success("删除成功");
                            this.currentPage = 1;
                            this.getData();
                        }
                    });
                });
            },

            /**
             * 获取数据
             */
            getData() {
                this.loading = true;
                let params = {};
                params.remark = this.selectdata.remark;
                params.name = this.selectdata.name;
                params.pageSize = this.pageSize;
                params.pageNumber = this.currentPage;
                address_book_list(params).then(res => {
                    if (res.status === 200) {
                        this.total = Number.parseInt(res.data.total);
                        this.tableData = res.data.list;
                        this.loading = false;
                    }

                })
            },
            /**
             * 改变每页大小
             */
            handleSizeChange(e) {
                this.pageSize = e;
                this.getData();
            },
            /**
             * 改变当前页
             */
            handleCurrentChange(e) {
                this.currentPage = e;
                this.getData();
            },
        },
        filters: {
            filterCtime(ctime) {
                // 过滤时间
                if (ctime) {
                    return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
                } else {
                    return '暂无数据'
                }
            },
            filterShow(show) {
                if (show === 1) {
                    return '显示'
                } else {
                    return '不显示'
                }
            }
        }
    }
</script>

<style scoped>

</style>